<template>
    <div class="payAction bg-white-pk">
        <div class="payMoney">
            实付款: <span class="text-red-pk">￥{{money}}</span>
            <template>
                <slot name="left"></slot>
            </template>
        </div>
        <div class="payBtn">
            <pk-button
                    type="danger"
                    :disabled="btnDisable"
                    style="border-radius: 0"
                    height="50px"
                    width="120px"
                    @click="handlePay">
                立即支付
            </pk-button>
        </div>
        <van-popup v-model="wxPayResult" closeable round>
            <div class="pk-popup-wrap text-center-pk">
                <div class="title">
                    请确认微信支付是否完成
                </div>
                <div class="payResult success text-red-pk" @click="wxPayResultConfirm('success')">
                    已完成支付
                </div>
                <div class="payResult fail"  @click="wxPayResultConfirm('fail')">
                    支付遇到问题
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script>
    export default {
        name: "payAction",
        props: {
            money: {
                type: [String, Number],
                default: ""
            }
        },
        components: {},

        data() {
            return {
                btnDisable: false,
                wxPayResult: false
            }
        },

        created() {
        },
        computed: {},
        watch: {},
        methods: {
            /*
            * 支付流程：获取动态密钥 -> 创建订单 -> 支付 -> 余额 ？ 支付结果 ： 转第三方支付
            * 获取动态密钥
            * */
            handlePay() {
                this.btnDisable = true;
                this.$api.getDynamicSecretKey().then( res => {
                    this.btnDisable = false;
                    let result = this.$resData(res);
                    if(result) {
                        this.$emit("change", result)
                    }
                })
            },
            //微信支付
            wxPay(result) {
                //微信,还应该判断是否在微信浏览器环境
                if(this.$global.isWxBrowser) {
                    this.onBridgeReady(result.wxUnifiedOrderVo);
                }else {
                    window.location.href = result.wxUnifiedOrderVo.mwebUrl;
                    setTimeout( () => {
                        this.wxPayResult = true;
                    },700);
                }
            },
            onBridgeReady(wxUnifiedOrderVo) {
                window.WeixinJSBridge.invoke(
                    'getBrandWCPayRequest', {
                        "appId":   wxUnifiedOrderVo.appid,   //公众号名称，由商户传入
                        "timeStamp": wxUnifiedOrderVo.timeStamp,         //时间戳，自1970年以来的秒数
                        "nonceStr": wxUnifiedOrderVo.noncestr, //随机串
                        "package": wxUnifiedOrderVo.packageStr,
                        "signType": wxUnifiedOrderVo.signType,      //微信签名方式：
                        "paySign": wxUnifiedOrderVo.sign //微信签名
                    },
                    function(res){
                        alert("再请求一次后端，判断订单支付状态,代完善");
                        //再请求一次后端，判断订单支付状态
                        if(res.err_msg == "get_brand_wcpay_request:ok" ){
                            // 使用以上方式判断前端返回,微信团队郑重提示：
                            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                            this.$router.push({path: "/goodsOrder/paySuccess", query: {orderId: this.orderIdList}})
                        }
                    }
                )
            },

            wxPayResultConfirm(type) {
                //type success 成功 fail 失败
                this.wxPayResult = false;
                if(type === "success") {
                    this.$router.push({path: "/goodsOrder/paySuccess", query: {orderId: this.orderIdList}})
                }else {
                    if(this.orderIdList.length >1) {
                        this.$router.push({path: "/orderList"})
                    }else {
                        this.$router.push({path: "/orderDetail", query: {orderId: this.orderIdList[0] }})
                    }
                }
            },

            //支付宝支付
            aliPay(result) {
                //console.log(result.aliUnifiedOrderVo.aliPayBody)
                this.aliPayHtml = result.aliUnifiedOrderVo.aliPayBody;
                this.$nextTick( ()=> {
                    document.forms[0].submit();
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .payAction {
        width: 100%;
        height: 50px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        .payMoney {
            flex: 1;
            text-align: right;
            padding-right: 10px;
        }
        .pk-popup-wrap {
            padding: 15px 0 0;
            .payResult {
                padding: 15px;
            }

            .success {
                border-top: 1px solid #f5f5f5;
                border-bottom: 1px solid #f5f5f5;
            }
        }
    }
</style>
